<template>
  <div>
    <div class="subTit">
      <span class="line"></span>
      <span class="tit">大学</span>
    </div>
    <div>
      <el-row>
        <el-col :span="7" :offset="1" v-for="(item, index) in list1" :key="index" class="common_item">
          <dv-border-box-7 :color="['#013147', '#22AEFF']" backgroundColor="#03223C">
            <div class="cont" @click="handleClickItem(item)">
              <div class="name">{{ item.name }}</div>
            </div>
          </dv-border-box-7>
        </el-col>
      </el-row>
    </div>
    <div class="subTit">
      <span class="line"></span>
      <span class="tit">中学</span>
    </div>
    <div>
      <el-row>
        <el-col :span="7" :offset="1" v-for="(item, index) in list2" :key="index" class="common_item">
          <dv-border-box-7 :color="['#013147', '#22AEFF']" backgroundColor="#03223C">
            <div class="cont" @click="handleClickItem(item)">
              <div class="name">{{ item.name }}</div>
            </div>
          </dv-border-box-7>
        </el-col>
      </el-row>
    </div>
    <div class="subTit">
      <span class="line"></span>
      <span class="tit">小学</span>
    </div>
    <div>
      <el-row>
        <el-col :span="7" :offset="1" v-for="(item, index) in list3" :key="index" class="common_item">
          <dv-border-box-7 :color="['#013147', '#22AEFF']" backgroundColor="#03223C">
            <div class="cont" @click="handleClickItem(item)">
              <div class="name">{{ item.name }}</div>
            </div>
          </dv-border-box-7>
        </el-col>
      </el-row>
    </div>
    <div class="subTit">
      <span class="line"></span>
      <span class="tit">幼儿园</span>
    </div>
    <div>
      <el-row>
        <el-col :span="7" :offset="1" v-for="(item, index) in list4" :key="index" class="common_item">
          <dv-border-box-7 :color="['#013147', '#22AEFF']" backgroundColor="#03223C">
            <div class="cont" @click="handleClickItem(item)">
              <div class="name">{{ item.name }}</div>
            </div>
          </dv-border-box-7>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryParams: {
        page: 1,
        limit: 1000,
        type: null // 0：幼儿园 1：小学 2：中学 3：大学
      },
      list1: [],
      list2: [],
      list3: [],
      list4: [],
    };
  },
  mounted() {
  },
  created() {
    this.getData();
  },
  methods: {
    // 学校数据
    getData() {
      this.$get("/coordinateSchool/school/page", this.queryParams).then((res) => {
        // 将res.data.list根据type分割成不同的数组数据
        let result = res.data.list.reduce(function(initArray, item){
          let index = item.type;
          if (initArray[index]) {
            initArray[index].push(item)
          } else {
            initArray[index]=[item]
          }
          return initArray;
        },[])
        this.list4 = result[0].splice(0, 6); // 幼儿园
        this.list3 = result[1].splice(0, 6);
        this.list2 = result[2].splice(0, 6);
        this.list1 = result[3];
      });
    },
    handleClickItem(val) {
      this.$emit("handleClickItem", val)
    }
  },
};
</script>

<style lang="less" scoped>
.subTit {
  text-align: left;
  margin: 5px;
  .line {
    width: 8px;
    height: 17px;
    background-color: #1779AC;
    display: inline-block;
    margin-right: 10px;
  }

  .tit {
    font-size: 24px;
    color: #FEFEFE;
  }
}

.common_item {
  :deep(.border-box-content) {
    box-sizing: border-box;
    display: flex;
    padding: 6px 10px 0px;
    pointer-events: auto;
    cursor: pointer;
  }
  margin-bottom: 10px;
  height: 48px;

  .cont {
    flex: 5;
    position: relative;
    bottom: 5px;

    .name {
      color: #C0C0C0;
      font-size: 13px;
    }
    .num {
      font-size: 18px;
      color: #FFFFFF;
    }
    .unit {
      font-size: 13px;
      color: #BFBFBF;
    }
  }
}
</style>
